<%--
  Created by IntelliJ IDEA.
  User: 沐白
  Date: 2020/8/20
  Time: 15:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>权限管理</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/laydate/need/laydate.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/toastr/toastr.min.css"/>
    <script src="${pageContext.request.contextPath}/static/js/jquery-2.1.0.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/static/laydate/laydate.js"></script>
    <script src="${pageContext.request.contextPath}/static/toastr/toastr.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/Myjs.js"></script>
    <style type="text/css">
        .panel-heading > a {
            text-decoration: none;
        }

        .panel-body {
            margin-left: 50px;
        }
    </style>
</head>

<body>
<div class="form-group">
    <!--上边的信息还有文本框-->
    <div class="form-inline" style="margin-top: 10px">
        <div class="form-group">
            <label>职位名称</label>
            <input type="text" class="form-control" id="jobName" placeholder="职位名称"/>
        </div>
        <input type="button" class="btn btn-primary" id="btn" value="搜索"/>
        <input type="button" class="btn btn-primary" data-toggle="modal" data-target="#xzzw" value="新增职位"/>
    </div>
</div>
<!--表格-->
<div class="form-group">
    <table class="table table-bordered table-striped table-hover text-center">
        <thead>
        <tr class="info">
            <td>职位名称</td>
            <td>职位描述</td>
            <td>职位状态</td>
            <td class="col-sm-6">操作</td>
        </tr>
        </thead>
        <tbody id="tb"></tbody>
    </table>
</div>
<%--下边的文字下拉菜单还有按钮 --%>
<div class="form-inline">
    <label>显示第 <span id="rowstart"></span> 到第 <span id="rowend"></span> 条记录,总共<span id="rowcount"></span>条记录
        每页显示
        <select class="form-control" id="pageSize">
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
        条记录</label>
    <label class="btn-group pull-right">
        <a href="javascript:search(pageBean.pageNo-1)" class="btn btn-default"><</a>
        <div id="btns" class="btn-group"></div>
        <a href="javascript:search(pageBean.pageNo+1)" class="btn btn-default">></a>
    </label>
</div>
<!-- 职位修改模态框 -->
<div class="modal fade" id="zwxg">
    <div class="modal-dialog modal-lg modal-content">
        <div class="modal-header">
            <button class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">职位管理</h4>
        </div>
        <div class="modal-body">
            <form id="xiugai">
                <div class="row">
                    <div class="form-group col-sm-12">
                        <div class="input-group col-sm-12">
                            <input type="hidden" name="id" value="">
                            <div class="input-group-addon">职位名称</div>
                            <input type="text" class="form-control" name="roleName" placeholder="职位名称"/>
                            <span class="glyphicon form-control-feedback"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-sm-12">
                        <div class="input-group col-sm-12">
                            <div class="input-group-addon">职位描述</div>
                            <input type="text" class="form-control success" name="description" placeholder="职位描述"/>
                            <span class="glyphicon form-control-feedback"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-sm-12">
                        <div class="input-group col-sm-12 has-success">
                            <div class="input-group-addon">职位状态</div>
                            <select class="form-control" name="status">
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                            <span class="glyphicon form-control-feedback"></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <input type="button" class="btn btn-default" data-dismiss="modal" value="关闭"/>
            <input type="button" class="btn btn-primary" onclick="xgqueren()" value="确认"/>
        </div>
    </div>
</div>

<!-- 权限分配模态框 -->
<div class="modal fade" id="qxfp">
    <div class="modal-dialog modal-lg modal-content">
        <div class="modal-header">
            <button class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">权限分配</h4>
        </div>
        <div class="modal-body" id="qxAllShow"></div>
        <div class="modal-footer">
            <input type="button" class="btn btn-default" data-dismiss="modal" value="关闭"/>
            <input type="button" class="btn btn-primary" onclick="qxqueren()" value="确认"/>
        </div>
    </div>
</div>
<!-- 新增位模态框 -->
<div class="modal fade" id="xzzw">
    <div class="modal-dialog modal-lg modal-content">
        <div class="modal-header">
            <button class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">职位管理</h4>
        </div>
        <div class="modal-body">
            <form id="xinzeng">
                <div class="row">
                    <div class="form-group col-sm-12">
                        <div class="input-group col-sm-12">
                            <div class="input-group-addon">职位名称</div>
                            <input type="text" class="form-control" name="roleName" placeholder="职位名称"/>
                            <span class="glyphicon form-control-feedback"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-sm-12">
                        <div class="input-group col-sm-12">
                            <div class="input-group-addon">职位描述</div>
                            <input type="text" class="form-control success" name="description" placeholder="职位描述"/>
                            <span class="glyphicon form-control-feedback"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-sm-12">
                        <div class="input-group col-sm-12 has-success">
                            <div class="input-group-addon">职位状态</div>
                            <select class="form-control" name="status">
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                            <span class="glyphicon form-control-feedback"></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <input type="button" class="btn btn-default" data-dismiss="modal" value="关闭"/>
            <input type="button" class="btn btn-primary" onclick="xzqueren()" value="确认"/>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">
    let pageBean = new Object();
    pageBean.pageNo = 1;
    pageBean.pageSize = 5;
    pageBean.factor = [];

    function search(num) {
        //判断上一页有没有
        if (num > 0) {
            pageBean.pageNo = num;
        } else {
            pageBean.pageNo = 1;
            num = 1;
        }
        //判断下一页有没有
        if (num <= pageBean.totalPage) {
            pageBean.pageNo = num;
        } else {
            if (pageBean.totalPage != 0) {
                pageBean.pageNo = pageBean.totalPage;
            } else {
                pageBean.pageNo = 1;
            }
        }
        //判断职位名称填写没有
        if ($('#jobName').val() != "") {
            if ($('#jobName').val().indexOf("'") >= 0) {
                pageBean.factor.push(" 1=0 ");
            } else {
                pageBean.factor.push(" roleName like '%" + $('#jobName').val() + "%' ");
            }
        }
        pageBean.data = "";
        show();
    }

    //界面开始时候的显示数据
    function show() {
        $.ajax({
            url: "${pageContext.request.contextPath}/permissions/show",
            data: pageBean,
            success: function (date) {
                pageBean = date;
                pageBean.factor = [];
                $('#rowcount').html(pageBean.rowCount);
                $('#rowstart').html(pageBean.rowCount == 0 ? 0 : pageBean.startIndex + 1);
                let con = pageBean.rowCount == 0 ? 0 :
                    pageBean.pageNo == pageBean.totalPage ?
                        pageBean.rowCount % pageBean.pageSize == 0 ?
                            pageBean.pageSize : pageBean.rowCount % pageBean.pageSize
                        : pageBean.pageSize;
                $('#rowend').html(pageBean.startIndex + con);
                let btns = "";
                for (let i = 0; i < pageBean.totalPage; i++) {
                    if (pageBean.pageNo == i + 1) {
                        btns += "<a href='javascript:search(" + (i + 1) + ");' class='btn btn-primary'>" + (i + 1) + "</a>";
                    } else {
                        btns += "<a href='javascript:search(" + (i + 1) + ");' class='btn btn-default'>" + (i + 1) + "</a>";
                    }
                }
                $('#btns').html(btns);
                //表格显示
                let tr = "";
                let role = pageBean.data;
                if (role != null) {
                    for (let i = 0; i < role.length; i++) {
                        let ststus = "";
                        if (role[i]['status'] == 1) {
                            ststus = "<input type=\"button\" class=\"btn btn-info btn-xs\" value=\"启用\" />";
                        } else {
                            ststus = "<input type=\"button\" class=\"btn btn-danger btn-xs\" value=\"禁用\" />";
                        }
                        tr += "<tr>\n" +
                            "<td>" + role[i]['roleName'] + "</td>\n" +
                            "<td>" + role[i]['description'] + "</td>\n" +
                            "<td>" + ststus + "</td>\n" +
                            "<td>\n" +
                            "<input type=\"button\" class=\"btn btn-info btn-sm\" onclick=\"xiugai()\" value=\"修改\" />\n" +
                            "<input type=\"button\" onclick='qxfpBtn()' class=\"btn btn-warning btn-sm\" value=\"权限分配\" />\n" +
                            "</td>\n" +
                            "</tr>";
                    }
                }
                $('#tb').html(tr);
            },
            dataType: "json"
        });

    }

    function xiugai() {
        let roleName = event.target.parentNode.parentNode.firstElementChild.innerHTML;
        $.ajax({
            url: "${pageContext.request.contextPath}/permissions/findNameByRole",
            type: "post",
            data: {roleName: roleName},
            success: function (data) {
                $('#xiugai input:hidden').val(data['id']);
                let inp = $('#xiugai .form-control');
                inp[0].value = data['roleName'];
                inp[1].value = data['description'];
                inp[2].value = data['status'];
            },
            dataType: "json"
        })
        $('#zwxg').modal("show");
    }

    function xgqueren() {
        let flag = true;
        $('#zwxg .form-control').each(function () {
            if (this.value == "") {
                if(this.value.index("'")!=-1){
                    flag = false;
                }
            }
        })
        if (flag) {
            $.ajax({
                url: "${pageContext.request.contextPath}/permissions/updateRole",
                type: "post",
                data: $('#xiugai').parseForm(),
                success: function (data) {
                    if (data != -1) {
                        search(pageBean.pageNo);
                        toastr.success("修改成功");
                    } else {
                        toastr.error("修改失败");
                    }
                    $("#zwxg").modal('hide');
                },
                dataType: "json"
            })
        } else {
            toastr.warning("请输入职位和职位描述");
        }
    }

    function xzqueren() {
        let flag = true;
        $('#xzzw .form-control').each(function () {
            if (this.value == "") {
                if(this.value.index("'")!=-1){
                    flag = false;
                }
            }
        })
        if (flag) {
            $.ajax({
                url: "${pageContext.request.contextPath}/permissions/addRole",
                type: "post",
                data: $('#xinzeng').parseForm(),
                success: function (data) {
                    if (data != -1) {
                        search(pageBean.pageNo);
                        toastr.success("添加成功");
                    } else {
                        toastr.error("添加失败");
                    }
                    $('#xzzw').modal('hide');
                },
                dataType: "json"
            })
        } else {
            toastr.warning("请输入职位和职位描述");
        }
    }

    function deleteTr() {
        let roleName = event.target.parentNode.parentNode.firstElementChild.innerHTML;
        if (confirm("您确定要删除此职位?")) {
            $.ajax({
                url: "${pageContext.request.contextPath}/permissions/deleteRole",
                type: "post",
                data: {roleName: roleName},
                success: function (data) {
                    if (data != -1) {
                        search(1);
                        toastr.success("删除成功");
                    } else {
                        toastr.success("删除失败");
                    }
                },
                dataType: "json"
            })
        }
    }

    function qxfpBtn() {
        let roleName = event.target.parentNode.parentNode.firstElementChild.innerHTML;
        //权限管理内容显示
        $.post(
            "${pageContext.request.contextPath}/permissions/qxShow",
            {roleName: roleName},
            function (data) {
                $('#qxAllShow').empty();
                $('#qxAllShow').append("<input type='hidden' id='roleById' value='" + data['role']['id'] + "'>");
                for (let i = 0; i < data['all'].length; i++) {
                    let adiv = $("<div></div>");
                    $(adiv).addClass("form-group");
                    adiv.html("<div class=\"panel\">\n" +
                        "           <div class=\"panel-heading\">\n" +
                        "               <span class=\"glyphicon glyphicon-menu-right\"></span>\n" +
                        "               <span class=\"glyphicon glyphicon-unchecked zhu\" onclick='zhu()' value='" + data['all'][i]['id'] + "'></span>\n" +
                        "               <a class=\"panel-title\" data-toggle=\"collapse\" href=\"#quanxian" + i + "\">" + data['all'][i]['momo'] + "</a>\n" +
                        "           </div>\n" +
                        "       </div>")
                    let odiv = $("<div></div>");
                    $(odiv).attr('id', "quanxian" + i);
                    $(odiv).addClass("panel-collapse collapse");
                    for (let j = 0; j < data['all'][i]['list'].length; j++) {
                        odiv.append("     <div class=\"panel-body\">\n" +
                            "           <div>\n" +
                            "               <span class=\"glyphicon glyphicon-unchecked ge\" onclick='ge()' value='" + data['all'][i]['list'][j]['id'] + "'></span>" + data['all'][i]['list'][j]['resourceName'] + "\n" +
                            "           </div>\n" +
                            "       </div>");
                    }
                    adiv.append(odiv);
                    $('#qxAllShow').append(adiv);
                    if (data['resource'] != null && data['resource'].length > 0) {
                        for (let s = 0; s < data['resource'].length; s++) {
                            $("#qxfp span[value='" + data['resource'][s] + "']").removeClass("glyphicon-unchecked");
                            $("#qxfp span[value='" + data['resource'][s] + "']").addClass("glyphicon-check");
                        }
                    }
                }
                $('#qxfp').modal('show');
            }, "json"
        );
    }

    //权限确定按钮
    function qxqueren() {
        let roleId = $('#qxfp :hidden').val();
        let qxIds = [];
        $('#qxfp .glyphicon-check').each(function () {
            qxIds.push($(this).attr('value'));
        })
        $.ajax({
            url: "${pageContext.request.contextPath}/permissions/deleteQx",
            type: "post",
            data: {roleId: roleId, qxIds: qxIds},
            success: function (data) {
                if (data != -1) {
                    toastr.success("权限分配成功");
                } else {
                    toastr.success("权限分配失败");
                }
                $('#qxfp').modal('hide');
            },
            dataType: "json"
        })
    }

    //所有主多选框点击产生的事件 --让下边的多选框进行级联
    function zhu() {
        let sp = event.target;
        if ($(sp).hasClass("glyphicon-unchecked")) {
            $(sp).removeClass("glyphicon-unchecked");
            $(sp).addClass("glyphicon-check");
        } else {
            $(sp).removeClass("glyphicon-check");
            $(sp).addClass("glyphicon-unchecked");
        }
        let inp = sp.parentNode.parentNode.parentNode.lastElementChild.getElementsByTagName('span');
        for (let i = 0; i < inp.length; i++) {
            if ($(sp).hasClass("glyphicon-unchecked")) {
                $(inp[i]).removeClass("glyphicon-check");
                $(inp[i]).addClass("glyphicon-unchecked");
            } else {
                $(inp[i]).removeClass("glyphicon-unchecked");
                $(inp[i]).addClass("glyphicon-check");
            }
        }
    };

    //所有子多选框选中之后对父级多选框级联
    function ge() {
        let sp = event.target;
        if ($(sp).hasClass("glyphicon-unchecked")) {
            $(sp).removeClass("glyphicon-unchecked");
            $(sp).addClass("glyphicon-check");
        } else {
            $(sp).removeClass("glyphicon-check");
            $(sp).addClass("glyphicon-unchecked");
        }
        let zhu = sp.parentNode.parentNode.parentNode.parentNode.getElementsByClassName('zhu')[0];
        let ge = sp.parentNode.parentNode.parentNode.parentNode.getElementsByClassName('ge');
        let asd = false;
        $(ge).each(function () {
            if ($(this).hasClass("glyphicon-check")) {
                asd = true;
                return false;
            }
        });
        if (asd) {
            zhu.className = 'glyphicon glyphicon-check zhu';
        } else {
            zhu.className = 'glyphicon glyphicon-unchecked zhu';
        }
    };

    $(function () {
        search(1);
        $('#btn').click(function () {
            search(1);
        });
        $('#zwxg').on('hide.bs.modal',function () {
            $(this).clea();
        });
        $('#xzzw').on('hide.bs.modal',function () {
            $(this).clea();
        });
        //职位修改输入框监听 事件
        $('#zwxg .form-control').each(function () {
            $(this).on('input porpertychange', function () {
                if ($(this).val() == "") {
                    this.parentNode.className = 'input-group col-sm-12 has-error';
                    this.parentNode.getElementsByClassName('glyphicon')[0].className = 'glyphicon form-control-feedback glyphicon-remove';
                } else {
                    this.parentNode.className = 'input-group col-sm-12 has-success';
                    this.parentNode.getElementsByClassName('glyphicon')[0].className = 'glyphicon form-control-feedback glyphicon-ok';
                }
            })
        })
        //新增职位输入框监听 事件
        $('#xzzw .form-control').each(function () {
            $(this).on('input porpertychange', function () {
                if ($(this).val() == "") {
                    this.parentNode.className = 'input-group col-sm-12 has-error';
                    this.parentNode.getElementsByClassName('glyphicon')[0].className = 'glyphicon form-control-feedback glyphicon-remove';
                } else {
                    this.parentNode.className = 'input-group col-sm-12 has-success';
                    this.parentNode.getElementsByClassName('glyphicon')[0].className = 'glyphicon form-control-feedback glyphicon-ok';
                }
            })
        })
        $('#pageSize').on('change', function () {
            pageBean.pageSize = parseInt($('#pageSize').val());
            search(1);
        })
        //折叠菜单的显示触发的事件
        $('.collapse').on('show.bs.collapse', function () {
            this.parentNode.firstElementChild.firstElementChild.firstElementChild.className = "glyphicon glyphicon-menu-down";
        });
        //折叠菜单的隐藏触发的事件
        $('.collapse').on('hide.bs.collapse', function () {
            this.parentNode.firstElementChild.firstElementChild.firstElementChild.className = "glyphicon glyphicon-menu-right";
        });
    })
</script>
</html>